<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>驾校信息</el-breadcrumb-item>
      <el-breadcrumb-item>套餐管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加套餐</el-button>
        </el-col>
      </el-row>
    </el-card>


    <el-card>
      <!-- 考试列表区域 -->
      <el-table :data="applyList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="套餐名称" prop="name" width="164px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="科目一训练课时" prop="subjectOneTime" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectOneTime }} 小时
          </template>
        </el-table-column>
        <el-table-column label="科目二训练课时" prop="subjectTwoTime" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectTwoTime }} 小时
          </template>
        </el-table-column>
        <el-table-column label="科目三训练课时" prop="subjectThreeTime" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectThreeTime }} 小时
          </template>
        </el-table-column>
        <el-table-column label="科目四训练课时" prop="subjectFourTime" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectFourTime }} 小时
          </template>
        </el-table-column>
        <el-table-column label="科目一考试次数" prop="subjectOneExam" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectOneExam }} 次
          </template>
        </el-table-column>
        <el-table-column label="科目二考试次数" prop="subjectTwoExam" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectTwoExam }} 次
          </template>
        </el-table-column>
        <el-table-column label="科目三考试次数" prop="subjectThreeExam" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectThreeExam }} 次
          </template>
        </el-table-column>
        <el-table-column label="科目四考试次数" prop="subjectFourExam" width="120px">
          <template slot-scope="scope">
            {{ scope.row.subjectFourExam }} 次
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" width="100px"></el-table-column>


        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button type="primary" icon="el-icon-s-claim" size="mini"
                       @click="deleteApply(scope.row.id)">删除套餐
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增套餐的对话框 -->
    <el-dialog title="新增考试" :visible.sync="addDialogVisible" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="addApplyForm" :rules="addApplyFormRules" ref="addApplyFormRef" label-width="110px">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="addApplyForm.name" placeholder="请输入套餐名称"></el-input>
        </el-form-item>
        <el-form-item label="科目一课时" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectOneTime" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目一课时">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目二课时" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectTwoTime" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目二课时">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目三课时" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectThreeTime" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目三课时">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目四课时" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectFourTime" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目四课时">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目一考试次数" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectOneExam" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目一考试次数">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目二考试次数" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectTwoExam" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目二考试次数">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目三考试次数" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectThreeExam" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目三考试次数">
            </el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="科目四考试次数" prop="subject">
          <template>
            <el-input-number v-model.number="addApplyForm.subjectFourExam" @change="priceHandleChange"
                             :min="0" :max="10000" label="请输入科目四考试次数">
            </el-input-number>
          </template>
        </el-form-item>

        <el-form-item label="套餐价格" prop="examNumber">
          <template>
            <el-input-number v-model.number="addApplyForm.price" @change="priceHandleChange"
                             :min="0" :max="10000" label="请设置套餐价格">
            </el-input-number>
          </template>
        </el-form-item>

      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogClosed">取 消</el-button>
        <el-button type="primary" @click="addApply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Apply",
  data() {
    return {
      // 套餐列表
      applyList: [],
      // 控制新增套餐对话框的显示与隐藏
      addDialogVisible: false,
      // 添加套餐
      addApplyForm: {
        name: '',
        subjectOneTime: 0,
        subjectTwoTime: 0,
        subjectThreeTime: 0,
        subjectFourTime: 0,
        subjectOneExam: 0,
        subjectTwoExam: 0,
        subjectThreeExam: 0,
        subjectFourExam: 0,
        price: 0
      },
      addApplyFormRules: [],
    }
  },
  created() {
    this.getApplyList()
  },
  methods: {

    getApplyList() {
      this.$http.get('/driver/applicationPackage/getApplyList').then(res => {
        if (res.data.code === 200) {
          this.applyList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    deleteApply(id) {

      this.$confirm('确定要删除该套餐吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/driver/applicationPackage/deleteApply', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getApplyList()
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error(err.message)
        })
      })


    },
    addApply() {
      this.$http.post('/driver/applicationPackage/addApply', this.addApplyForm).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getApplyList()
          this.addDialogVisible = false
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 监听新增考试对话框的关闭事件
    addDialogClosed() {
      this.$refs.addApplyFormRef.resetFields()
      this.addDialogVisible = false
    },
    priceHandleChange(number){
      this.addApplyForm.price = number
    }
  }
}
</script>

<style scoped>

</style>
